<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Chip</h1>
        <p>Chip represents entities using icons, labels and images.</p>
    </div>
    <app-demoActions github="chip" stackblitz="chip-demo"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <h5>Basic</h5>
        <div class="flex align-items-center">
            <p-chip label="Action" styleClass="mr-2"></p-chip>
            <p-chip label="Comedy" styleClass="mr-2"></p-chip>
            <p-chip label="Mystery" styleClass="mr-2"></p-chip>
            <p-chip label="Thriller" [removable]="true"></p-chip>
        </div>

        <h5>Icon</h5>
        <div class="flex align-items-center">
            <p-chip label="Apple" icon="pi pi-apple" styleClass="mr-2"></p-chip>
            <p-chip label="Facebook" icon="pi pi-facebook" styleClass="mr-2"></p-chip>
            <p-chip label="Google" icon="pi pi-google" styleClass="mr-2"></p-chip>
            <p-chip label="Microsoft" icon="pi pi-microsoft" [removable]="true"></p-chip>
        </div>

        <h5>Image</h5>
        <div class="flex align-items-center">
            <p-chip label="Amy Elsner" image="assets/showcase/images/demo/avatar/amyelsner.png" styleClass="mr-2"></p-chip>
            <p-chip label="Asiya Javayant" image="assets/showcase/images/demo/avatar/asiyajavayant.png" styleClass="mr-2"></p-chip>
            <p-chip label="Onyama Limba" image="assets/showcase/images/demo/avatar/onyamalimba.png" styleClass="mr-2"></p-chip>
            <p-chip label="Xuxue Feng" image="assets/showcase/images/demo/avatar/xuxuefeng.png" [removable]="true"></p-chip>
        </div>

        <h5>Styling</h5>
        <div class="flex align-items-center">
            <p-chip label="Action" styleClass="mr-2 custom-chip"></p-chip>
            <p-chip label="Comedy" styleClass="mr-2 custom-chip"></p-chip>
            <p-chip label="Onyama Limba" image="assets/showcase/images/demo/avatar/onyamalimba.png" styleClass="mr-2 custom-chip"></p-chip>
            <p-chip label="Xuxue Feng" image="assets/showcase/images/demo/avatar/xuxuefeng.png" [removable]="true" styleClass="custom-chip"></p-chip>
        </div>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123; ChipModule &#125; from 'primeng/chip';
</app-code>
                <h5>Getting Started</h5>
				<p>Chip can display labels, icons and images.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-chip label="Text Only"&gt;&lt;/p-chip&gt;
&lt;p-chip label="Text with icon" icon="pi pi-check"&gt;&lt;/p-chip&gt;
&lt;p-chip label="Text with image" image="user.png"&gt;&lt;/p-chip&gt;
</app-code>

                <h5>Removable</h5>
                <p>Setting <i>removable</i> property displays an icon to close the chip, the optional <i>onRemove</i>
                    event is available to get notified when a chip is hidden.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-chip label="Text" [removable]="true"&gt;&lt;/p-chip&gt;
</app-code>

                <h5>Templating</h5>
				<p>Content can easily be customized with the dynamic content instead of using the built-in modes.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-chip&gt;
    Content
&lt;/p-chip&gt;
</app-code>

                <h5>Properties</h5>
                <div class="doc-tablewrapper">
					<table class="doc-table">
						<thead>
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Default</th>
                                <th>Description</th>
                            </tr>
						</thead>
						<tbody>
							<tr>
								<td>label</td>
								<td>string</td>
								<td>null</td>
								<td>Defines the text to display.</td>
							</tr>
							<tr>
								<td>icon</td>
								<td>string</td>
								<td>null</td>
								<td>Defines the icon to display.</td>
							</tr>
							<tr>
								<td>image</td>
								<td>string</td>
								<td>null</td>
								<td>Defines the image to display.</td>
							</tr>
							<tr>
								<td>removable</td>
								<td>boolean</td>
								<td>false</td>
								<td>Whether to display a remove icon.</td>
                            </tr>
                            <tr>
                                <td>style</td>
                                <td>object</td>
                                <td>null</td>
                                <td>Inline style of the component.</td>
                            </tr>
                            <tr>
                                <td>styleClass</td>
                                <td>string</td>
                                <td>null</td>
                                <td>Style class of the component.</td>
                            </tr>
							<tr>
								<td>removeIcon</td>
								<td>string</td>
								<td>pi pi-times-circle</td>
								<td>Icon of the remove element.</td>
							</tr>
						</tbody>
					</table>
                </div>
                
                <h5>Events</h5>
				<div class="doc-tablewrapper">
					<table class="doc-table">
						<thead>
                            <tr>
                                <th>Name</th>
                                <th>Parameters</th>
                                <th>Description</th>
                            </tr>
						</thead>
						<tbody>
                            <tr>
                                <td>onRemove</td>
                                <td>event: Browser event</td>
                                <td>Callback to invoke when a chip is removed.</td>
                            </tr>
						</tbody>
					</table>
                </div>
                
				<h5>Styling</h5>
				<p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming</a> page.</p>
				<div class="doc-tablewrapper">
					<table class="doc-table">
						<thead>
                            <tr>
                                <th>Name</th>
                                <th>Element</th>
                            </tr>
						</thead>
						<tbody>
                            <tr>
								<td>p-chip</td>
								<td>Container element.</td>
                            </tr>
							<tr>
								<td>p-chip-image</td>
								<td>Container element in image mode.</td>
                            </tr>
							<tr>
								<td>p-chip-text</td>
								<td>Text of the chip.</td>
                            </tr>
							<tr>
								<td>pi-chip-remove-icon</td>
								<td>Remove icon.</td>
                            </tr>
						</tbody>
					</table>
				</div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/chip" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-chip-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
            
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;h5&gt;Basic&lt;/h5&gt;
&lt;div class="flex align-items-center"&gt;
    &lt;p-chip label="Action" styleClass="mr-2"&gt;&lt;/p-chip&gt;
    &lt;p-chip label="Comedy" styleClass="mr-2"&gt;&lt;/p-chip&gt;
    &lt;p-chip label="Mystery" styleClass="mr-2"&gt;&lt;/p-chip&gt;
    &lt;p-chip label="Thriller" [removable]="true"&gt;&lt;/p-chip&gt;
&lt;/div&gt;

&lt;h5&gt;Icon&lt;/h5&gt;
&lt;div class="flex align-items-center"&gt;
    &lt;p-chip label="Apple" icon="pi pi-apple" styleClass="mr-2"&gt;&lt;/p-chip&gt;
    &lt;p-chip label="Facebook" icon="pi pi-facebook" styleClass="mr-2"&gt;&lt;/p-chip&gt;
    &lt;p-chip label="Google" icon="pi pi-google" styleClass="mr-2"&gt;&lt;/p-chip&gt;
    &lt;p-chip label="Microsoft" icon="pi pi-microsoft" [removable]="true"&gt;&lt;/p-chip&gt;
&lt;/div&gt;

&lt;h5&gt;Image&lt;/h5&gt;
&lt;div class="flex align-items-center"&gt;
    &lt;p-chip label="Amy Elsner" image="assets/showcase/images/demo/avatar/amyelsner.png" styleClass="mr-2"&gt;&lt;/p-chip&gt;
    &lt;p-chip label="Asiya Javayant" image="assets/showcase/images/demo/avatar/asiyajavayant.png" styleClass="mr-2"&gt;&lt;/p-chip&gt;
    &lt;p-chip label="Onyama Limba" image="assets/showcase/images/demo/avatar/onyamalimba.png" styleClass="mr-2"&gt;&lt;/p-chip&gt;
    &lt;p-chip label="Xuxue Feng" image="assets/showcase/images/demo/avatar/xuxuefeng.png" [removable]="true"&gt;&lt;/p-chip&gt;
&lt;/div&gt;

&lt;h5&gt;Styling&lt;/h5&gt;
&lt;div class="flex align-items-center"&gt;
    &lt;p-chip label="Action" styleClass="mr-2 custom-chip"&gt;&lt;/p-chip&gt;
    &lt;p-chip label="Comedy" styleClass="mr-2 custom-chip"&gt;&lt;/p-chip&gt;
    &lt;p-chip label="Onyama Limba" image="assets/showcase/images/demo/avatar/onyamalimba.png" styleClass="mr-2 custom-chip"&gt;&lt;/p-chip&gt;
    &lt;p-chip label="Xuxue Feng" image="assets/showcase/images/demo/avatar/xuxuefeng.png" [removable]="true" styleClass="custom-chip"&gt;&lt;/p-chip&gt;
&lt;/div&gt;
</app-code>
<app-code lang="css" ngNonBindable ngPreserveWhitespaces>
:host ::ng-deep .p-chip.custom-chip &#123;
    background: var(--primary-color);
    color: var(--primary-color-text);
&#125;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-chip-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
